<template>
  <div class="inter-wrap" :style="style">
    <div v-if="isDrag" id="drag" class="drag">{{dragObject.siaName}}</div>
    <div class="title">接口列表</div>
    <div class="inter-list" v-loading="loading">
      <el-collapse accordion v-model="interfaceActive">
        <el-collapse-item v-for="(item,index) in interfaceTypeList" :title="item.siaoName" :key="index" :name="index">
          <div class="inter-item" v-for="child in item.list">
            <div class="inter-name">{{child.siaName}}</div>
            <div class="btn-bar">
              <span @click="caseList(child)">用例</span>
              <span @click="detail(child)">详情</span>
              <i class="el-icon-rank rank-icon" @mousedown="move($event, child)"></i>
            </div>
          </div>
          <div class="not-data" v-if="item.list.length === 0">暂无数据</div>
        </el-collapse-item>
      </el-collapse>
      <div style="position:absolute;bottom:0;background:#fff;">
        <el-pagination
          @current-change="currentChange"
          :current-page="1"
          layout="total, prev, pager, next"
          :total="interfaceTypePage.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="interfaceTitle" :visible.sync="interfaceDialog" :width="'90%'" :append-to-body="true">
      <interface-details v-if="interfaceDialog" :node="interfaceData" />
    </el-dialog>
    <CaseList :dialogVisibleCase="dialogVisibleCase" :node="node" @closeCaseCall="closeCaseCall"/>
  </div>
</template>

<script>
  import InterfaceDetails from '../../../../rdComponent/common/InterfaceDetails'
  import CaseList from './CaseList'
    export default {
      components: {
        InterfaceDetails,
        CaseList
      },
      name: "InterfaceList",
      props: ["siId"],
      data () {
          return {
            loading: true,
            interfaceActive: 0,//默认显示接口列表第一个元素
            interfaceTypeList: [],
            dialogVisibleCase:false,
            isTaskType: true,
            interfaceTypePage: {
              pageNum: 1,
              pageSize: 10,
              total: 0
            },
            isDrag: false,
            dragObject: null,
            interfaceTitle: "",
            interfaceDialog: false,
            interfaceData: null,
            style:'',
            node:{}
          }
      },
      created () {
        this.getInterfaceList();
        this.systemStyle()
      },
      methods: {
        //关闭弹窗
        closeCaseCall(){
          this.dialogVisibleCase=false
        },
        //用例列表
        caseList(data){
          this.node = data
          this.dialogVisibleCase=false
          this.$nextTick(()=>{
            this.dialogVisibleCase=true
          })
        },
        move(e, row) {
          this.dragObject = row;
          //获取目标元素
          let odiv = e.target;
          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;
          //鼠标按下并移动的事件
          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;
            //移动当前元素
            $("#drag").css({ left: left + 'px', top: top + 'px' });
            this.isDrag = true;
          };
          //松开拖动
          document.onmouseup = (e) => {
            let obj = e.target; //拖拽到的目的地对象
            if ($(obj).attr("id") === "canvas") {
              //当前对象的坐标
              this.dragObject.x = e.offsetX;
              this.dragObject.y = e.offsetY;
              this.$emit("dragCall", this.dragObject);
            }
            document.onmousemove = null;
            document.onmouseup = null;
            this.isDrag = false;
          };
        },
        /**通过实例获取接口类型**/
        getInterfaceList() {
          this.axios.get(this.interfaceUrl.path + '/center/owners?siId=' + this.siId + '&pageSize=' + this.interfaceTypePage.pageSize + '&pageNum=' + this.interfaceTypePage.pageNum)
            .then((res) => {
              let resData = res.data.list
              this.interfaceTypePage.total = res.data.total
              resData.forEach((item, index) => {
                item.list = [];
                this.axios.get(this.interfaceUrl.path+'/center/interfaces?siaoId='+item.siaoId+'&siId='+item.siId)
                  .then(rsp => {
                    item.list = rsp.data.list;
                    //请求完了关闭loading
                    if (index === resData.length - 1) {
                      this.interfaceTypeList = resData;
                      setTimeout(() => {
                        this.loading = false;
                      }, 500)
                    }
                  })
              });
            })
        },
        /**查看节点详情**/
        detail(node) {
          this.interfaceTitle = node.siaName + '信息详情'
          this.interfaceData = node;
          this.interfaceDialog = false
          this.$nextTick(() => {
            this.interfaceDialog = true;
          })
        },
        currentChange() {

        },
        //设置高度
        systemStyle(){
          this.clientHeight = document.documentElement.clientHeight
          this.style="height:"+(this.clientHeight-94)+'px;background:#e2eaed;padding-left:10px;'
        },
      }
    }
</script>

<style>
  .inter-list .el-collapse-item__header{padding-left: 15px;box-sizing: border-box}
  .inter-list .el-collapse-item__content{padding-bottom: 0;}
</style>

<style scoped lang="less">
  .title{
    font-size:16px;
    padding:10px;
    background:#fff;
    font-weight: 900;}
  .inter-wrap{
    height: 650px;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    .inter-list {
      height: calc(100% - 44px);
      overflow-y: auto;
      overflow-x: hidden;
      .inter-item{
        display: flex;
        padding: 10px 30px;
        border-bottom: 1px solid #ebeef5;
        transition: all 0.3s;
        &:hover{
          background: #ebeef5;
        }
        &:first-child{
          border-top: 1px solid #ebeef5;
        }
        &:last-child{
          border-bottom: none;
        }
        .inter-name{
          width: calc(100% - 100px);
        }
        .btn-bar {
          width: 120px;
          text-align: right;
          padding-right: 5px;
          box-sizing: border-box;
          span{
            transition: all 0.3s;
            cursor: pointer;
            margin-left: 10px;
            color: #0aa8e9;
            &:hover{
              color: #2fb0ff;
            }
          }
          .rank-icon{
            display: inline-block;
            color: #0aa8e9;
            cursor: pointer;
            font-size: 16px;
            margin-left: 10px;
            position: relative;
            top: 2px;
            z-index: 9;
            &:hover{
              color: #2fb0ff;
            }
          }
        }
      }
    }
  }
  .drag {
    position: absolute;
    z-index: 999;
    text-align: center;
    padding: 0 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background: -webkit-linear-gradient(left top, #fff, #0aa8e9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #fff, #0aa8e9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #fff, #0aa8e9); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #fff, #0aa8e9);
    opacity: .7;
  }
</style>
